﻿@using DevExpress.ExpressApp.Blazor.Components
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop

@inject IJSRuntime JSRuntime

<div class="d-flex align-items-center dxbl-fl-cpt dxbl-text">
    <div>@Caption</div>
    <div id="@Id">
        <XafImage ImageName="BindingEditorHelpIcon" Size="16" Color="#999" CssClass="ms-1" />
    </div>
</div>

@code {
    private string Id { get; } = $"id-{Guid.NewGuid()}";

    [Parameter]
    public string Caption { get; set; }

    [Parameter]
    public string ToolTip { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            var tippyOptions = new
            {
                content = Markdig.Markdown.ToHtml(ToolTip),
                trigger = "mouseenter touchstart",
                placement = "auto",
                interactive = true,
                allowHTML = true
            };
            await JSRuntime.InvokeVoidAsync("tippy", [$"#{Id}", tippyOptions]);
        }
    }
}
